<template>
   <!-- 按钮框 -->
   <div style="padding: 20px; display: flex; justify-content: space-between;">
      <div>
        <el-button type="primary" @click="router.push('/dashboard/clue/add')"  v-checkButton="'clue:add'">录入线索</el-button>
        <el-button type="info" @click="importExcel" v-checkButton="'clue:import'">导入线索(Excel)</el-button>
        <el-button type="danger" @click="batchDelete" v-checkButton="'clue:delete'">批量删除</el-button>
      </div>
      <div style="display: flex;">
        <el-input placeholder="请输入客户名字" v-model="fullName" style="margin-right: 10px;"></el-input>
        <el-button type="success" @click="list(1)">搜索</el-button>
      </div>
   </div>
   <!-- 表格 -->
   <div style="padding-left: 20px;">
      <el-table 
            :data="clueList" 
            style="width: 100%" 
            border
            table-layout="auto"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection"/>
            <el-table-column prop="id" label="序号" fixed  />
            <el-table-column prop="ownerName" label="负责人"  width="120"/>
            <el-table-column prop="activityName" label="所属活动"  width="180" />
            <el-table-column prop="fullName" label="姓名" width="120" />
            <el-table-column prop="appellationValue" label="称呼"  width="120"/>
            <el-table-column prop="phone" label="手机号"  width="120"/>
            <el-table-column prop="weixin" label="微信" width="120" />
            <el-table-column prop="needLoanValue" label="是否贷款"  width="120"/>
            <el-table-column prop="intentionStateValue" label="意向状态"  width="120"/>
            <el-table-column prop="intentionProductValue" label="意向产品"  width="120"/>
            <el-table-column prop="stateValue" label="线索状态"  width="120">
              <template #default="scope">
                <el-tag
                  :type="scope.row.state == '-1' ? 'success' : 'info'"
                  disable-transitions
                  >{{ scope.row.stateValue }}</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column prop="sourceValue" label="线索来源"  width="120"/>
            <el-table-column prop="nextContactTime" label="下次联系时间"  width="200"/>
            <el-table-column label="操作" fixed="right"  width="200" >
                <template #default="scope">
                    <el-button type="primary" plain size="small" @click="router.push(`/dashboard/clue/info/${scope.row.id}`)" v-checkButton="'clue:view'">
                        详情
                    </el-button>
                    <el-button  type="success"  plain size="small" @click="router.push(`/dashboard/clue/edit/${scope.row.id}`)" v-checkButton="'clue:edit'">
                        编辑
                    </el-button>
                    <el-button  type="danger"  plain size="small" @click="deleteClue(scope.row.id)" v-checkButton="'clue:delete'">
                        删除
                    </el-button>
                </template>
            </el-table-column> 
        </el-table>
   </div>
   <!-- 分页 -->
   <div style="margin-top: 20px;">
      <el-pagination 
            background 
            layout="prev, pager, next" 
            :total="page.total"
            :page-size="page.pageSize"
            @current-change="currentChange" 
      />
   </div>
   <!-- dialog对话框 -->
   <el-dialog
    v-model="dialogVisible"
    title="导入excel"
    width="500"
  >
    <!-- 上传组件 -->
    <div>
      <el-upload
        ref="uploadRef"
       
        :auto-upload="false"
        :limit="1"
        :http-request="uploadExcel"
      >
        <template #trigger>
          <el-button type="primary">选择Excel文件</el-button>
        </template>

        <template #tip>
          <div class="el-upload__tip">
            Excel文件的最大不能超过100M
          </div>
        </template>
      </el-upload>
    </div>
    <template #footer>
      <div>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary"  @click="submitUpload">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup name="ClueView">
import { onMounted, ref, reactive } from 'vue';
import { baseService } from '@/utils/httpReqest';
import { Clue } from '@/hooks/clue';
import router from '@/router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
let clueList = ref<Clue[]>([]);
let fullName = ref('');
let dialogVisible = ref(false)
let uploadRef = ref();
let selectIds = reactive<any[]>([])
let page = reactive({
  pageSize: 8, //单页记录数
  total: 0,
  currentPage: 1,
})
onMounted(() => {
  list();
})
let list = (currentPage = 1) => {
  baseService.doGet("/clue/list", {
    currentPage: currentPage,
    pageSize: 8,
    fullName: fullName.value
  }).then((res: any) => {
    if (res.code == 200) {
      clueList.value = res.data.data
      page.total = res.data.total;
    } else {
      ElMessage.error("获取活动列表失败")
    }
  })
}

let handleSelectionChange = (ClueArray: any[]) => {
  selectIds = []
  ClueArray.forEach((user) => {
    selectIds.push(user.id)
  })
}
let deleteClue = (id: number) => {
  ElMessageBox.confirm(
    '确定删除吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    baseService.doPut("/clue/delete", [id]).then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("删除成功");
        list(page.currentPage);
      } else {
        ElMessage.error(res.msg ? res.msg:"删除失败");
      }
    })
  })
}
let currentChange = (number: number) => {
  page.currentPage = number;
  list(number);
}
let importExcel = () => {
  dialogVisible.value = true
}
let uploadExcel = (option: any) => {
  let formData = new FormData();
  formData.append("file", option.file);
  axios.post("http://localhost:8080/api/clue/importExcel", formData, {
    headers: {
      "Content-Type": "multipart/form-data",
      "token": localStorage.getItem("token")
    }
  }).then((res: any) => {
    if (res.data.code == 200) {
      ElMessage.success("导入成功")
      list(page.currentPage)
    } else {
      ElMessage.error("导入失败")
    }
  })
}
let submitUpload = () => {
  dialogVisible.value = false;
  uploadRef.value!.submit();
  uploadRef.value.clearFiles();
}
let batchDelete = () => {
  ElMessageBox.confirm(
    '确定删除吗？',
    '批量删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    if (selectIds.length < 1) {
      ElMessage.error("请选择线索")
    } else {
      baseService.doPut("/clue/delete", selectIds).then((res: any) => {
        if (res.code == 200) {
          ElMessage.success("删除成功");
          list(page.currentPage);
        } else {
          ElMessage.error(res.msg ? res.msg:"删除失败");
        }
      })
    }
  })
}
</script>
<style scoped></style>